<!DOCTYPE html>
<html lang="zh-CN">

{[template "__head.html"]}

<body>
<div id="app">

    {[template "__navbar.html"]}

    <div class="container-fluid">
        <div class="row">

            {[template "__sidebar.html" .]}

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h4><b>主机 {{slave}}} 的目录&文件</b></h4>
                <div class="form-inline">
                    <input type="text" id="input_dir" class="form-control" id="exampleInputAmount" placeholder="/home">
                    <button class="btn btn-primary" @click="GoToDir()">进入</button>
                </div>
                <hr>
                <h4><b>{{now_path}}</b></h4>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" @click="">(TODO...)上传文件</button>
                    <button type="button" class="btn btn-default" @click="">(TODO...)创建目录</button>
                    <button type="button" class="btn btn-default" @click="">(TODO...)打包下载整个目录</button>
                    <button type="button" class="btn btn-default" @click="GoToDirRefresh()">刷新</button>
                </div>
                <hr>
                <br>
                <div class="row">

                    <div class="col-md-3" style="padding: 12px;height: 100px;" v-for="item in dir">
                        <span v-if="item.IsDir === false && item.IsEdit === true"
                              class="glyphicon glyphicon-cog" aria-hidden="true" style="font-size: 39px;"></span>

                        <span v-else-if="item.IsDir === false && item.IsEdit === false"
                              class="glyphicon glyphicon-file" aria-hidden="true" style="font-size: 39px;"></span>

                        <span v-else-if="item.IsDir === true && item.IsEdit === false"
                              class="glyphicon glyphicon-folder-close" aria-hidden="true" style="font-size: 39px;"></span>
                        <br>
                        {{item.FileName}}
                        <br>
                        <button v-if="item.IsDir == false && item.IsEdit == true"
                                type="button" class="btn btn-default btn-xs" @click="OpenFileModal(item)">查看</button>
                        <button v-if="item.IsDir == false && item.IsEdit == true"
                                type="button" class="btn btn-default btn-xs" @click="">(TODO...)下载</button>
                        <button v-if="item.IsDir == true && item.IsEdit == false"
                                type="button" class="btn btn-default btn-xs" @click="GoToDirBut(item)">进入</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改文件 -->
    <div class="modal fade" id="OpenFileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-target=".bs-example-modal-lg">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 900px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改文件</h4>
                </div>
                <div class="modal-body">
                    <code id="file_code"></code>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</div>

{[template "__js.html"]}
{[template "__init_js.html"]}

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            url: new Url(),
            slave: "{[.slave]}",
            now_path: "/",
            dir: {},
        },

        methods: {

            GetSlavePath: function (path) {
                const t = this;
                AjaxRequestText(t.url.GetSlavePath(t.slave, path), {}, "GET", function(d){
                    var jsonObj = JSON.parse(d);
                    t.dir = jsonObj.body.data;
                    console.log(t.dir);
                });
            },

            GoToDirBut: function (item) {
                const t = this;
                t.now_path = t.now_path + "/" + item.FileName;
                t.GetSlavePath(t.now_path);
            },

            GoToDir: function () {
                const t = this;
                t.now_path  = $("#input_dir").val()
                this.GetSlavePath(t.now_path);
            },

            GoToDirRefresh: function () {
                const t = this;
                t.GetSlavePath(this.now_path);
            },

            OpenFileModal: function (item) {
                const t = this;
                var path = t.now_path + "/" + item.FileName;
                console.log(path);
            }

        },

        created:function(){
            console.log("created");
            this.GetSlavePath(this.now_path);
            WSConnectNotice();
        },

        mounted:function(){

        },
    })

</script>

</body>
</html>